let name = ''; // 用户名
let message = ''; // 输入的消息
let ws, ws1;

// 处理文本区输入事件
const handleTextareaInput = (e) => {
  message = e.target.value;
}
// 发送按钮点击事件
const handleSendBtnClick = (e) => {
  if (ws && message !== '') {
    ws.send(JSON.stringify({
      type: 'sendMessage',
      time: new Date().getTime(),
      data: message,
      name: name
    }));
  }
}

/**
 * dom 构建
 */
// 构建用户列表
const buildUserList = (users) => {
  if (users && users.length) {
    const elUserList = document.querySelector('#userlist');
    elUserList.innerHTML = '<p>用户列表：</p>';
    users.forEach(el => {
      const elUser = document.createElement('p');
      elUser.innerText = el;
      elUserList.appendChild(elUser);
    });
  }
}
// 构建消息
const buildMessageList = (messages) => {
  if (messages && messages.length) {
    const elMessageList = document.querySelector('#messageList');
    elMessageList.innerHTML = '';
    messages.forEach(el => {
      const elMessage = document.createElement('p');
      elMessage.innerText = name + '：' + el.data;
      elMessageList.appendChild(elMessage);
    });
    document.querySelector('#message').value = '';
  }
}

const buildSocket = () => {
  /**
   * 原生 WebSocet API 使用
   */
  ws = new WebSocket(`ws://${window.location.host}/${name}`);
  // ws1 = new WebSocket(`ws://${window.location.host}/test11`); // 同页面同源下websoket连接会进行复用

  /**
   * 监听 open 事件（触发于握手之后）
   */
  ws.onopen = () => {
    console.log('握手成功');
    ws.send(JSON.stringify({
      type: 'connection',
      time: new Date().getTime(),
      data: name,
      name: name
    }))
  }

  /**
   * 监听 message 事件，获取后台 push 的数据  
   */
  ws.onmessage = (e) => {
    const data = JSON.parse(e.data);
    if (data.success) {
      if (data.type) {
        switch (data.type) {
          case "users": buildUserList(data.data); break;
          case "message": buildMessageList(data.data); break;
          default: break;
        }
      }
    } else {
      alert(data.msg);
    }
  }

  /**
   * 监听 close 时间，触发于 websocket 连接断开时
   */
  ws.onclose = () => {
    console.log('连接已断开');
  }

  // 也是走的 ws 的那条信道
  // ws1.onopen = () => {
  //   ws.send('test');
  // }
}

/**
 * 事件绑定
 */
const addEvent = () => {
  // 文本区输入事件绑定
  const elInputArea = document.querySelector('#message');
  elInputArea.addEventListener('input', handleTextareaInput, false);
  const elSendBtn = document.querySelector('#send');
  elSendBtn.addEventListener('click', handleSendBtnClick, false);
}
addEvent();

const enterName = () => {
  name = prompt('请输入您的昵称：');
  if (name) {
    buildSocket();
    document.querySelector('#curUsername').textContent = name;
  } else {
    alert('一定要名字');
    enterName();
  }
}
enterName();